<template>
  <div class style="height: 100%;padding: 20px;position: relative;">
    <div :style="{position:'absolute', top: getscalepxc(-15),right: getscalepxc(20)}">
      <div class="fww" :style="{
        fontSize: getscalepxc(10)
      }">
        <div>总面积&nbsp;</div>
        <div style="color: #53F3F3">{{total}}</div>
        <div>&nbsp;万㎡</div>
      </div>
    </div>
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "guanwanggongremianjihuantuzzn",
  mixins: [defaultmixins,commonmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
      total: 0
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbPipenetzz": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale * 1.0;

    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale
        }
      },
      grid: {
        bottom: "0%",
        top: "0%",
        left: "5%",
        right: "5%",
        containLabel: true
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "55%"],
          hoverAnimation: true,
          color: ["#5957C2", "#76FBC0", "#FCC708", "#29C6FA"],
          data: [].sort(function(a, b) {
            return a.value - b.value;
          }),
          // roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                fontSize: 35 * scale
              },
              formatter: function(params, ticket, callback) {
                return (
                  "{white|" +
                  params.name +
                  "}\n{blue|" +
                  params.value +
                  "}{white|万㎡}"
                );
              },
              alignTo: 'labelLine',
              rich: {
                white: {
                  color: "#fff",
                  fontSize: 25 * scale,
                  padding: [5, 0]
                },
                blue: {
                  color: "#53F3F3",
                  fontSize: 30 * scale
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 30 * scale,
              length2: 50 * scale,
              lineStyle: {
                width: 3
              }
            }
          }
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(pipenetDataObj) {
      let _this = this
      this.options.series[0].data = [];
      this.total = 0
      pipenetDataObj.forEach(p => {
        _this.total += Number(Number(Object.values(p)[0].sa001heatare).toFixed(0))
        _this.options.series[0].data.push({
          name: Object.keys(p)[0],
          value: Number(Object.values(p)[0].sa001heatare).toFixed(0)
        })
      })

      let tmp1 = _this.options.series[0].data.splice(_this.options.series[0].data.length - 1,1)
      _this.options.series[0].data.splice(0,0,tmp1[0])
      tmp1 = _this.options.series[0].data.splice(_this.options.series[0].data.length - 1,1)
      _this.options.series[0].data.splice(0,0,tmp1[0])
      tmp1 = _this.options.series[0].data.splice(_this.options.series[0].data.length - 1,1)
      _this.options.series[0].data.splice(0,0,tmp1[0])
      this.myChart.setOption(this.options);
    },
  }
};
</script>
<style lang='scss' scoped>
</style>